<template>
  <div ref="body" class="container">
    <div>hook vue</div>
    <div>count: {{ value.count }}</div>
    <hr />
    <App1 />
  </div>
</template>

<script>
export default { name: "HookVue" };
</script>

<script setup>
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import State from "./hooks/State";
import App1 from "./components/comApp1.vue";
defineComponent({
  App1,
});

const { body, value } = State();

const timer = ref(null);
onMounted(() => {
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    value.value.count++;
  }, 1000);
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style lang="less" scoped></style>
